<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>'/>
    <link type="text/css" rel="stylesheet"
          href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>'/>
    <script src='<spring:url value="/webjars/jquery/1.11.1/jquery.min.js"/>'></script>
    <script src='<spring:url value="/webjars/bootstrap/3.3.5/js/bootstrap.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular.min.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular-resource.js"/>'></script>
    <script src="<%=request.getContextPath() %>/resources/js/echarts/echarts.js"></script>
    <script src='<spring:url value="/webjars/bootbox/4.4.0/bootbox.js"/>'></script>
    <link href="<%=request.getContextPath() %>/resources/css/content.css" rel="stylesheet">
    <script src="<%=request.getContextPath() %>/resources/js/userMonitor/userMonitorModel.js"></script>
    <script src="<%=request.getContextPath() %>/resources/js/userMonitor/userMonitorService.js"></script>
    <script src="<%=request.getContextPath() %>/resources/js/userMonitor/userMonitorController.js"></script>
</head>

<body ng-app="userMonitorApp" ng-controller="userMonitorCtrl">
<div class="adcc-container">
    <form class="form-inline" style="float: right;">
        <div class="input-group">
            <ol class="breadcrumb" style="padding: 0px;margin: auto">
                <li class="active">刷新时间(/秒)：</li>
            </ol>
        </div>
        <div class="form-group" style="margin-bottom: 0px">
            <select ng-model="sysTime" class="form-control" ng-init="sysTime='5000'"
                    ng-change="changeTime(sysTime)">
                <option value='5000'>5秒</option>
                <option value='10000'>10秒</option>
                <option value='15000'>15秒</option>
            </select>
        </div>

    </form>
    <ol class="breadcrumb" style="margin-bottom: 0px">
        <li class="active">系统监控</li>

    </ol>
    <div class="col-md-12 collapse-active" id="collapseThree" style="padding-right:0px;">
        <div style="float: left;margin-left: 4px">
            <span ng-if="gwMode=='EMERGENCY'"><img style="height: 110px" title="应急模式"
                                                   src="<%=request.getContextPath() %>/resources/pic/emergency.png"></span>
            <span ng-if="gwMode=='NORMAL'"><img style="height: 110px" title="普通模式"
                                                src="<%=request.getContextPath() %>/resources/pic/normal.png"></span>
            <span ng-if="gwMode=='EXCEPTION'"><img style="height: 110px" title="异常"
                                                    src="<%=request.getContextPath() %>/resources/pic/exception.png"></span>
        </div>
        <table style="float: right;">
            <tr>
                <td width="460px" height="110px"> <%--AMQS--%>
                    <table style="height:110px;width:440px;text-align: center;"
                           ng-style="{'background-color':(amqsState=='CONNECTED')? '7ad57a':'d9524e'}"
                           title="{{amqTitle}}" class="sysMonitorTB">
                        <tr>
                            <th style="text-align: center;font-size:180%">AMQS</th>
                        </tr>
                        <tr>
                            <td>Host:{{amqsHost}}&nbsp;&nbsp;&nbsp;&nbsp;Port:{{amqsPort}}</td>
                        </tr>
                        <tr>
                            <td>QM:{{amqsQm}}&nbsp;&nbsp;&nbsp;&nbsp;CHL:{{amqsChannel}}</td>
                        </tr>
                    </table>
                </td>
                <td width="460px"> <%--MQ--%>
                    <table style="height:110px;margin-left: 10px; width:440px;text-align: center;"
                           ng-style="{'background-color':(mqInfoState=='Running')? '7ad57a':'d9524e'}"
                           title="{{mqInfoTitle}}" class="sysMonitorTB">
                        <tr>
                            <th style="text-align: center;font-size:180%">MQ</th>
                        </tr>
                        <tr>
                            <td>Host:{{mqInfoHost}}&nbsp;&nbsp;&nbsp;&nbsp;Port:{{mqInfoPort}}</td>
                        </tr>
                        <tr>
                            <td>QM:{{mqInfoName}}</td>
                        </tr>
                    </table>
                </td>
                <td width="460px"><%--GW--%>
                    <table style="height:110px;float:right;width:440px;text-align: center;"
                           ng-style="{'background-color':(gwHealthy==true)? '7ad57a':'d9524e'}" title="{{gwTitle}}"
                           class="sysMonitorTB">
                        <tr>
                            <th style="text-align: center;font-size:180%">{{gwName}}&nbsp;&nbsp;{{gwIp}}</th>
                        </tr>
                        <tr>
                            <td>Host:{{gwHost}}&nbsp;&nbsp;&nbsp;&nbsp;Port:{{gwPort}}</td>
                        </tr>
                        <tr>
                            <td>QM:{{gwQm}}&nbsp;&nbsp;&nbsp;&nbsp;CHL:{{gwChannel}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>


        <%--<table class="sysMonitorTB" frame=box bordercolor="#ccc" style="float: right;width: auto;height: 112px">--%>
        <%--<tr>--%>
        <%--<th ng-style="{'background-color':(amqsState=='CONNECTED')? '7ad57a':'d9524e'}"--%>
        <%--style="color:white;width: 115px;text-align:center;font-size:180%" title="{{amqTitle}}" rowspan="6">--%>
        <%--AMQS--%>
        <%--</th>--%>
        <%--<td style="text-align: center;width: 355px" rowspan="6">--%>
        <%--<table style="height:90px" >--%>
        <%--<tr>--%>
        <%--<td class="td1">Host:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{amqsHost}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1">Post:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{amqsPort}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"> QM:</td>--%>
        <%--<td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{amqsQm}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"> Channel:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{amqsChannel}}</td>--%>
        <%--</tr>--%>
        <%--</table>--%>
        <%--</td>--%>
        <%--<th ng-style="{'background-color':(mqInfoState=='Running')? '7ad57a':'d9524e'}"--%>
        <%--style="color:white;width: 115px;text-align:center;font-size:180%" title="{{mqInfoTitle}}"--%>
        <%--rowspan="6">MQ--%>
        <%--</th>--%>
        <%--<td style="text-align: center;width: 360px" rowspan="6">--%>
        <%--<table style="height:90px">--%>
        <%--<tr>--%>
        <%--<td class="td1">Host:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{mqInfoHost}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1">Post:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{mqInfoPort}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td class="td1"> QM:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{mqInfoName}}</td>--%>
        <%--</tr>--%>
        <%--</table>--%>
        <%--</td>--%>
        <%--<th ng-style="{'background-color':(gwState=='CONNECTED')? '7ad57a':'d9524e'}"--%>
        <%--style="color:white;width: 115px;text-align:center;font-size:180%" title="{{gwTitle}}" rowspan="6">GW--%>
        <%--</th>--%>
        <%--<td style="text-align: right;width: 130px"> Host:</td>--%>
        <%--<td style="width: 215px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{gwHost}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td style="text-align: right;"> Post:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{gwPort}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td style="text-align: right"> QM:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{gwQm}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td style="text-align: right"> Channel:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{gwChannel}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td style="text-align: right;"> State:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{gwState}}</td>--%>
        <%--</tr>--%>
        <%--<tr>--%>
        <%--<td style="text-align: right;"> Mode:</td>--%>
        <%--<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{gwMode}}</td>--%>
        <%--</tr>--%>

        <%--</table>--%>
    </div>
    <form class="form-inline" style="float: right;margin-top: 8px;margin-bottom: 10px">
        <div class="input-group">
            <ol class="breadcrumb" style="padding: 0px;margin: auto">
                <li class="active">刷新时间(/秒)：</li>
            </ol>
        </div>
        <div class="form-group">
            <select ng-model="selectTime" class="form-control" ng-init="selectTime='5000'"
                    ng-change="changeTime(selectTime)">
                <option value='5000'>5秒</option>
                <option value='10000'>10秒</option>
                <option value='15000'>15秒</option>
            </select>
        </div>

    </form>

    <ol class="breadcrumb" style="margin-top: 131px;margin-bottom: 0px">
        <li class="active">用户监控</li>
    </ol>
    <div style="width: 100%;min-height:400px;overflow:hidden;border:solid 1px #ccc;padding-top: 10px">
        <div ng-repeat="x in userMonitors" style="text-align:left;display:inline-block;width: 7%;">

            <%--绿色--%>
            <span style=" padding-left:12px;padding-right:12px;display:inline-block;width:155%;text-align:center;"
                  ng-if="x.state==3"><img height="70px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;IP:{{ x.ip }}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/running.png"></span>
            <%--红色--%>
            <span style="padding-left:12px;padding-right:12px;display:inline-block;width:155%;text-align:center;"
                  ng-if="x.state==1"><img height="70px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/stop.png"></span>
            <%--灰色--%>
            <span style="padding-left:12px;padding-right:12px;display:inline-block;width:155%;text-align:center;"
                  ng-if="x.state==4"><img height="70px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/disconnect.png"></span>
            <%--黄色--%>
            <span style=" padding-left:12px;padding-right:12px;display:inline-block;width:155%;text-align:center;"
                  ng-if="x.state==2"><img height="70px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/warning.png"></span>

            <div style=" padding-left:12px;padding-right:12px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align: middle; width: 155%"
                 data-toggle="tooltip" data-placement="top" title="{{ x.name }}"><a
                    ng-click="showDialogStatusIp('127.0.0.1')">{{x.name}}</a></div>

        </div>
    </div>

    <div class="panel-group" id="accordion" style="padding-top: 10px">
        <div class="panel panel-default">
            <div class="panel-heading">
                <ol class="breadcrumb">
                    <li class="active">日志</li>
                    <a data-toggle="collapse" data-parent="#accordion"
                       href="#collapseOne" class="accordion-toggle glyphicon glyphicon-chevron-down"
                       style="float: right">
                    </a>
                </ol>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div style="height: 260px;margin-bottom: 0px">
                        <form class="form-inline" style="float: right;">
                            <div class="input-group">
                                <ol class="breadcrumb" style="padding: 0px;margin: auto">
                                    <li class="active">刷新时间(/秒)：</li>
                                </ol>
                            </div>
                            <div class="form-group">
                                <select ng-model="logTime" class="form-control" ng-init="logTime='30000'"
                                        ng-change="changeLogTime(logTime)">
                                    <option value='15000'>15秒</option>
                                    <option value='30000'>30秒</option>
                                    <option value='60000'>60秒</option>
                                </select>
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group">
                                <ol class="breadcrumb" style="padding: 0px;margin: auto">
                                    <li class="active">显示条数(/条)：</li>
                                </ol>
                            </div>
                            <div class="form-group">
                                <select ng-model="logCount" class="form-control" ng-init="logCount='50'"
                                        ng-change="changeLogCount(logCount)">
                                    <option value='30'>30</option>
                                    <option value='50'>50</option>
                                    <option value='100'>100</option>
                                </select>
                            </div>
                        </form>
                        <div style="width: 100%;height:220px;border:0px #ccc;overflow:auto">
                            <table class="table table-bordered table-condensed table-hover" style="table-layout:fixed">
                                <thead>
                                <tr>
                                    <th style="width: 12%">时间</th>
                                    <th style="width: 12%">用户</th>
                                    <th style="width: 80%">日志</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="x in logs" ng-style="setBgColor(x.level)">
                                    <td>{{x.createTime }}</td>
                                    <td>{{x.name}}</td>
                                    <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;"
                                        data-toggle="tooltip" data-placement="top" title="{{x.log }}">{{x.log }}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%--提示框模态框--%>
    <div class="modal fade" id="dialogStatusIp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         style="margin-top: 100px;pxoverflow-y: auto" data-backdrop="static">
        <div class="modal-dialog" role="document" style="width:55%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>用户网络检测
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="netForm" name="netForm">
                        <div class="row">
                            <div class="col-md-12">
                                <label for="userMonitorIp" class="col-md-1 control-label">IP:</label>

                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="userMonitorIp" id="userMonitorIp"
                                           ng-pattern="/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/"
                                           ng-model="userMonitorIp">

                                    <div class="error" ng-show="netForm.userMonitorIp.$dirty && netForm.userMonitorIp.$invalid">
                                        <small class="error" ng-show="netForm.userMonitorIp.$error.pattern">
                                            <span class="font-style">请输入格式正确的IP</span>
                                        </small>
                                    </div>
                                </div>
                                <label for="pingNum" class="col-md-1 control-label">count:</label>

                                <div class="col-md-2">
                                    <input type="text" class="form-control" name="pingNum" id="pingNum"
                                           ng-model="pingNum" ng-init="pingNum=10" ng-pattern="/^([1-9]|10)$/" placeholder="请输入1-10之间的数字">

                                </div>
                                <div class="col-md-2">
                                    <label class="radio-inline">
                                        <input type="radio" name="radio" value="ping" checked="checked"  ng-model="cmd" ng-checked="true">ping
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="radio" value="tracert" ng-model="cmd">tracert
                                    </label>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" ng-disabled="netForm.$invalid" class="btn btn-success"
                                            ng-click="checkNet(cmd,userMonitorIp,pingNum)">&nbsp;&nbsp;检测
                                        &nbsp;&nbsp;</button>
                                </div>
                            </div>
                        </div>
                    <div class="row" style="margin-top: 20px">
                        <div class="col-md-12">
                            <textarea id="stateList" style="resize: none" class="form-control"
                                      rows="10" disabled></textarea>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-inline">
                        <div class="col-md-2 col-md-offset-10">
                            <button type="button" data-dismiss="modal" class="btn btn-danger">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
